<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>发现酒店</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<style type="text/css">
		html,body {background-color: #efeff4;}
		.title {padding: 20px 15px 10px;color: #6d6d72;font-size: 15px;background-color: #fff;}
		.moduleTitle {padding: 10px;border-left: solid 5px #35d0c9;background-color: rgba(255, 255, 255, .7);border-bottom-right-radius: 0px;border-top-right-radius: 0px;}
		img.hotline {height: auto !important;max-width: initial !important;width: 100%;}
		p.price {position: absolute;bottom: 11px;}
		button.more {margin: 10px auto;background-color: transparent;color: palevioletred;border: solid 2px palevioletred;border-radius: 10px;padding: 4px;width: 38%;}
		div.xinluDes {position: absolute !important;opacity: 0.5 !important;background: #000 !important;color: #fff !important;height: 50px !important;font-family: '微软雅黑';font-size: 18px !important;
		bottom: 5px !important;line-height: 50px !important;box-shadow: 0px 0px 6px #000;}
		img.xinluImg {height: 200px !important;}
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: #35d0c9;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
		color: #35d0c9;border-bottom: 2px solid #007aff;background: 0 0;}
		img.freeImg {line-height: 100px !important;max-width: 150px !important;height: 100px !important;}
		p.freeDes {white-space: normal !important;}
		#cityChoice {font-size: 17px;height: 44px;display: inline-block;line-height: 44px;padding: 0px;padding-right: 10px;padding-left: 10px;color: #323232;background-color: transparent;font-size: 14px;color: #35d0c9;}
		.condition {position: relative;clear: both;overflow: hidden;height: 24px;line-height: 24px;}
		.condition span.jia {position: absolute;left: 3px;color: orange}
		.condition span.jia i.price {font-size: 18px;}
		.condition span.chakan {position: absolute;right: 3px;font-size: 14px;color: #ccc;}
		.mui-fullscreen .mui-segmented-control~.mui-slider-group {position:initial !important;  top:initial  !important; bottom:initial !important; width:initial !important; height: initial !important; }
		</style>
	</head>
	<script type="text/javascript" src="../../js/vue.min.js"></script>
	<script type="text/javascript" src="../../js/mui.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/us/URL.js"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			getGeocode();
		});
		var watchId;
		function geoInf(position) {
			var str = "";
			str += "地址：" + position.addresses + "\n"; //获取地址信息
			str += "坐标类型：" + position.coordsType + "\n";
			var timeflag = position.timestamp; //获取到地理位置信息的时间戳；一个毫秒数；
			str += "时间戳：" + timeflag + "\n";
			var codns = position.coords; //获取地理坐标信息；
			var lat = codns.latitude; //获取到当前位置的纬度；
			str += "纬度：" + lat + "\n";
			var longt = codns.longitude; //获取到当前位置的经度
			str += "经度：" + longt + "\n";
			var alt = codns.altitude; //获取到当前位置的海拔信息；
			str += "海拔：" + alt + "\n";
			var accu = codns.accuracy; //地理坐标信息精确度信息；
			str += "精确度：" + accu + "\n";
			var altAcc = codns.altitudeAccuracy; //获取海拔信息的精确度；
			str += "海拔精确度：" + altAcc + "\n";
			var head = codns.heading; //获取设备的移动方向；
			str += "移动方向：" + head + "\n";
			var sped = codns.speed; //获取设备的移动速度；
			str += "移动速度：" + sped;
			document.getElementById("cityChoice").innerText = position.address.city;
			document.getElementById("cityChoice_pub").innerText = position.address.city;
		}
		function getPos() {
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
			}, {
				geocode: false
			});
		}
		function watchPos() {
			if(watchId) {
				return;
			}
			watchId = plus.geolocation.watchPosition(function(p) {
				geoInf(p);
			}, function(e) {
			}, {
				geocode: false
			});
		}
		function clearWatch() {
			if(watchId) {
				plus.geolocation.clearWatch(watchId);
				watchId = null;
			}
		}
		// 通过定位模块获取位置信息
		function getGeocode() {
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
				alert("获取定位位置信息失败：" + e.message);
			}, {
				geocode: true
			});
		}
	</script>

	<body>
		<!--header s-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">发现酒店</h1>
		</header>
		<!--header e-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll" id="item2">
				<!--城市选择   s-->
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell citys" id="citys">
						<a class="mui-navigate-right">
							<span class="mui-badge mui-badge-danger cityChoice" id="cityChoice">未定位</span> 城市选择
						</a>
					</li>
				</ul>
				<!--城市选择  e-->
				<!--周边列表   s-->
				<ul class="mui-table-view mui-grid-view findList" id="list">
					<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in items">
						<a href="#" data-guid="item.guid">
							<img class="mui-media-object" :src="item.cover">
							<div class="mui-media-body">{{item.title}}</div>
							<div class="condition">
								<span class="jia">￥<i class="price">{{item.author}}</i>起</span>
								<span class="chakan">查看详情</span>

							</div>
						</a>
					</li>
				</ul>
				<!--周边列表   e-->
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				document.getElementById("citys").addEventListener("tap", function() {
					mui.openWindow({
						url: 'city_select.html'
					});

				})
				window.addEventListener('near2', function(event) {
					mui.plusReady(function() {
						var yourChoice = event.detail.choice;
						alert(yourChoice);
						document.getElementById("cityChoice").innerText = yourChoice;
					})

				}, false);
			});
		</script>
		<script type="text/javascript">
			var lastId = ''; //最新新闻的id
			var webview_detail = null; //详情页webview
			var titleNView = { //详情页原生导航配置
				backgroundColor: '#f7f7f7', //导航栏背景色
				titleText: '', //导航栏标题
				titleColor: '#000000', //文字颜色
				type: 'transparent', //透明渐变样式
				autoBackButton: true, //自动绘制返回箭头
				splitLine: { //底部分割线
					color: '#cccccc'
				}
			}
			mui.plusReady(function() {
				//预加载详情页
				webview_detail = mui.preload({
					url: 'detail.html',
					id: 'news_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView
					}
				});

			});
			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: "#list",
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: function() {
							if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
								plus.nativeUI.toast('似乎已断开与互联网的连接', {
									verticalAlign: 'top'
								});
								return;
							}
							var data = {
								column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
							}
							if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
								data.lastId = lastId;
								data.time = new Date().getTime() + "";
							}
							//请求顶部banner信息
							mui.getJSON(testUrl.article, data, function(rsp) {
								news.banner = {
									guid: rsp.post_id,
									title: rsp.title,
									cover: rsp.cover,
									author: rsp.author_name,
									time: dateUtils.format(rsp.published_at)
								};
							});
							//请求列表信息流
							mui.getJSON(testUrl.news, data, function(rsp) {
								mui('#list').pullRefresh().endPulldown();
								if(rsp && rsp.length > 0) {
									lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
									news.items = news.items.concat(convert(rsp));
								}
							});
						}
					}
				}
			});
			//新建vue
			var news = new Vue({
				el: "#item2",
				data: {
					banner: {}, //顶部banner数据
					items: [] //列表信息流数据
				}
			});
			//点击列表，打开详情
			//TODO 后续应该封装一个v-tap指令，实现tap监听
			mui('.mui-content').on('tap', '[data-guid]', function() {
				var guid = this.getAttribute('data-guid');
				//var title = this.querySelector(".mui-ellipsis-2").innerHTML.trim();
				//var author = this.querySelector(".author").innerHTML;
				//var time = this.querySelector(".time").innerHTML;
				var cover = this.querySelector("img").getAttribute("src");
				open_detail(guid, title, author, time, cover);
			});
			/**
			 * 打开新闻详情
			 * @param {String} guid 新闻ID
			 * @param {String} title  新闻标题
			 */
			function open_detail(guid, title, author, time, cover) {
				//若详情页尚未预加载完成，则延时等待再执行
				if(!webview_detail) {
					setTimeout(function() {
						open_detail(guid);
					}, 100);
				}
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					guid: guid,
					title: title,
					author: author,
					time: time,
					cover: cover
				});
				//更改详情页原生导航条信息
				titleNView.titleText = title;
				webview_detail.setStyle({
					"titleNView": titleNView
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
				}, 150);
			}

			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						guid: item.post_id,
						title: item.title,
						author: item.author_name,
						cover: item.cover,
						time: dateUtils.format(item.published_at)
					});
				});
				return newItems;
			}

			/**
			 * 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
			 */
			var dateUtils = {
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				humanize: function(milliseconds) {
					var humanize = '';
					mui.each(this.UNITS, function(unit, value) {
						if(milliseconds >= value) {
							humanize = Math.floor(milliseconds / value) + unit + '前';
							return false;
						}
						return true;
					});
					return humanize || '刚刚';
				},
				format: function(dateStr) {
					var date = this.parse(dateStr)
					var diff = Date.now() - date.getTime();
					if(diff < this.UNITS['天']) {
						return this.humanize(diff);
					}

					var _format = function(number) {
						return(number < 10 ? ('0' + number) : number);
					};
					return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
				},
				parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
					var a = str.split(/[^0-9]/);
					return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
				}
			};
		</script>
	</body>

</html>